<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width:200px;
            height:200px;
            background: pink;
            float:left;
        }
        div{
            float:left;
            margin:10px 30px;
        }
        div button{
            margin:10px 30px;
        }
        select option{
            font-size: 20px;
            margin-top: 10px;

        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("#btn-sel-all").click(function(){
                var srcCity = $("#src-city").children("option");
                $("#tar-city").append(srcCity);
            })
            $("#btn-sel-none").click(function(){
                var tarCity = $("#tar-city").children("option");
                $("#src-city").append(tarCity);
            })

            //往右边单选
            $("#btn-sel").click(function(){
                //获取到选中的option元素
                var selected = $("#src-city").children("option:selected");
                $("#tar-city").append(selected);
            })

            //往左边单选
            $("#btn-back").click(function(){
                var opsel = $("#tar-city").children("option:selected");
                $("#src-city").append(opsel);
            })
        })
    </script>
</head>
<body>
    <h1>省市选择：</h1>
    <select id="src-city" name="src-city" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
        <option value="4">广州</option>
        <option value="5">深圳</option>
    </select>
    <div class="btn-box">
        <button id="btn-sel-all"> &gt;&gt; </button> <br>
        <button id="btn-sel-none"> &lt;&lt; </button><br>
        <button id="btn-sel"> &gt; </button><br>
        <button id="btn-back"> &lt; </button>
    </div>
    <select id="tar-city" name="tar-city" multiple>

    </select>
</body>
</html>